import { getList } from '@/api/system/notice'
import payOrderApi from '@/api/order/payOrder'
import taskOrderApi from '@/api/order/taskOrder'
import { mapGetters } from 'vuex'
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/map'
import 'echarts/lib/chart/radar'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/chart/effectScatter'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/geo'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
import 'echarts/lib/component/visualMap'
import 'echarts/lib/component/dataset'
import 'echarts/map/js/world'
import 'zrender/lib/svg/svg'
import elementResizeDetectorMaker from "element-resize-detector"
export default {
  name: 'dashboard',
  components: {
    chart: ECharts
  },
  data() {
    return {
      lineData: {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['会员费', '任务服务费']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '会员费',
            type: 'line',
            data: []
          },
          {
            name: '任务服务费',
            type: 'line',
            data: []
          }
        ]
      },
      vipIncome: 0,
      serviceFeeIncome: 0,
      totalIncome: 0,
    }
  },
  computed: {
    ...mapGetters([
      'name'

    ])
  },
  created() {
    this.fetchData()
    this.init()
  },
  mounted(){
    //绑定echart图表跟随窗口大小自动缩放
    let that = this
    let erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById("dashboard"),(element)=>{
      that.$nextTick(()=>{
        that.$refs.lineChart.resize()
        that.$refs.barChart.resize()
        that.$refs.pieChart.resize()
      })
    })
  },
  methods: {
    fetchData() {
      this.listLoading = true
      const self = this
      getList(self.listQuery).then(response => {
        for (var i = 0; i < response.data.length; i++) {
          var notice = response.data[i]
          self.$notify({
            title: notice.title,
            message: notice.content,
            duration: 3000
          })
        }
        self.listLoading = false
      })
    },
    init(){
      payOrderApi.getVipIncomes().then(res =>{
        this.lineData.series[0].data = res.data.vipIncomes
        this.lineData.xAxis.data = res.data.date

      })
      taskOrderApi.getServiceFeeIncome().then(res =>{
        this.lineData.series[1].data = res.data
      })
      taskOrderApi.getIncome().then(res =>{
        this.vipIncome = res.data.vipIncome
        this.serviceFeeIncome = res.data.serviceFeeIncome
        this.totalIncome = res.data.totalIncome
      })
    }
  }
}
